<template>
	<view class="content">
		<view class="top-content">
			<view class="content-headImage">
				<view class="content-headImage-item">
					<view>
						<image src="/static/images/banner/touXiang01.png"></image>
					</view>
					<view>11</view>
					<view class="content-button">
						<view class="content-button-item">
							<view>+关注</view>
							<!-- <view v-show="isFollowing">已关注</view> -->
						</view>
						<view class="popup-delect"> × </view>
					</view>
				</view>
				<view class="content-headImage-text">
					<view>这是C语言</view>
				</view>
				<view class="content-Image-item">
					<!-- <image :src="item.imgUrl"></image> -->
				</view>
			</view>
			<view class="content-Image-item-icon">
				<view >
					<image src="/static/images/banner/share.png"></image>
					<view>分享</view>
				</view>
				<view >
					<image src="/static/images/banner/comment.png"></image>
					<view>评论</view>
				</view>
				<view>
					<image src="/static/images/banner/collect.png"></image>
				</view>
				<view>
					<image src="/static/images/banner/ok.png"></image>
				</view>
				<!-- 		<view class="addtion-things">
					<view>	:</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
</script>

<style lang="scss" scoped>
	page {

	}
	.top-content {
		margin: 15rpx;
		background-color: #f1f1f1;
		border-radius: 15rpx;

		// background-color: red;
		.content-headImage {
			padding: 20rpx;

			.content-headImage-item {
				display: flex;
				align-items: center;
				position: relative;

				image {
					margin-right: 10rpx;
					width: 40rpx;
					height: 40rpx;
				}

				.content-button {
					display: flex;
					align-items: center;
				}
				.content-button-item{
					// display: flex;
					// align-items: center;
					font-size: 28rpx;
					line-height: 50rpx;
					position: absolute;
					background-color: #FF7F50;
					color: #fff;
					top:0rpx;
					border-radius: 10rpx;
					view{						
						padding: 3rpx 20rpx;
					}
					right: 30rpx;
				}
				.popup-delect{
					position: absolute;
					right: 0rpx;
					font-size: 30rpx;
				}
			}
			.content-headImage-item view:nth-child(2) {
				font-size: 30rpx;
			}

			.content-headImage-text view:nth-child(1) {
				margin-top: 10rpx;
				font-size: 30rpx;
			}

			.content-Image-item {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				image {
					border-radius: 10rpx;
					width: 300rpx;
					height: 300rpx;
				}
			}
		}

		.content-Image-item-icon {
			display: flex;
			align-items: center;
			text-align: center;

			image {
				margin-bottom: 10rpx;
				width: 35rpx;
				height: 35rpx;
			}
		}

		.content-Image-item-icon view:nth-child(1) {
			display: flex;
			margin-left: 80rpx;

			view {
				margin-left: 5rpx;
			}
		}

		.content-Image-item-icon view:nth-child(2) {
			display: flex;
			margin-left: 100rpx;

			view {
				margin-left: 5rpx;
			}
		}

		.content-Image-item-icon view:nth-child(3) {
			// flex: 1;
			margin-left: 100rpx;
		}

		.content-Image-item-icon view:nth-child(4) {
			// flex: 1;
			margin-left: 100rpx;
		}
	}
</style>